<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰</title>
    <style>
        .cc{
            width: 200px;
            height: 200px;
            border: 5px solid burlywood;
            background-color: aqua;
        }
        .cc_div{
            width: 50px;
            height: 50px;
            border: 5px;
            background-color: beige;
            margin: 50px auto ;
        }
        .ccColor{
            background-color: blueviolet;
        }
        .ccDivColor{
            background-color: cadetblue;
        }
    </style>
</head>
<!-- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击。 -->
<body>
    <div id="app">
        {{msg}}

        <div class="cc" 
        :class="{ccColor:ishowColor}" 
        @click="changeColor">
            <div class="cc_div" 
            :class="{ccDivColor:ishowSmallColor}" 
            @click.stop="changeSmallColor"><!--stop用来事件阻止事件冒泡 -->
        </div>
        </div>
        <!-- prevent用来阻止标签的默认行为 -->
        <a href="www.baidu.com" @click.prevent="aclick">点击</a>

        <!--只触发标签自身的事件-->
        <div class="cc" @click.self="divClick">
            <!--用来阻止冒泡事件-->
            <input type="button" value="按钮1" @click="btnClick1"/>
            <input type="button" value="按钮2" @click="btnClick2"/>
        </div>

        <!--once一次作用 就是指定事件只触发一次-->
        <a href="www.baidu.com" @click.prevent.once="aclick">点击</a>
    </div>
</body>
</html>
<script src="./day1/js/2.7.14_dist_vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            msg:"Hello Vue!",
            ishowColor:false,
            ishowSmallColor:false,
        },
        methods: {
            changeColor(){
                this.ishowColor = !this.ishowColor;
            },
            changeSmallColor(){
                this.ishowSmallColor = !this.ishowSmallColor;
            },
            aclick(){
                alert('点击了A标签');
            },
            divClick(){
                alert('父类触发了点击事件')
            },
            btnClick1(){
                alert("按钮1点击")
            },
            btnClick2(){
                alert("按钮2点击")
            }
        },
        computed:{
            //计算属性
        },
    })
</script>